<template>
  <div class="container">
    <!-- 轮播图 -->
    <swiper></swiper>
    <div class="title">
      <div id="nav" ref="m"><span class="spao" @click="handleClick" ref="text">{{city}}</span>电影</div>
     
      <div class="navto">
        <router-link class="link" to="/films/nowPlaying">正在热映 </router-link>
        <router-link class="liok" to="/films/comingsoon">即将上映</router-link>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import axios from 'axios';
import axiosJsonp from 'axios-jsonp';
import Swiper from "./components/Swiper.vue";
export default {
  components: {
    Swiper,
  },
  data() {
    return {
      isNav: false,
      city:""
    };
  },

  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    var choosedCity = localStorage.getItem("city");
    if(choosedCity){
      this.city = choosedCity;
    }
    var url='https://apis.map.qq.com/ws/location/v1/ip?key=RZ3BZ-ESIKD-NDE4H-PPWND-KJBZ2-SXB36&output=jsonp';
    axios({
      url,
      adapter:axiosJsonp,
    }).then(res=>{
      console.log(res.data.result.ad_info.city);
      var localCity = res.data.result.ad_info.city.replace("","")
      localStorage.setItem("local",localCity)
      console.log(localCity);
      console.log(choosedCity);
     
     
    })
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },

  methods: {
    handleScroll() {
      // console.log(window);
      var scrollTop = window.scrollY;
      if (scrollTop >= 100) {
        this.$refs.m.style.display = "block";
      
      } else {
        this.$refs.m.style.display = "none";
      
      }
      
    },
    handleClick(){
        var text = this.$refs.text.innerHTML
        this.$router.push(`/city/${text}`)
    }
  },
 
};
</script>

<style scoped>
.spao{
   position: relative;
   left: -250px;
}
.router-link-active {
  color: orange;
}
.fixed {
  position: fixed;
  top: 30px;
  left: 0;
}
.container {
  height: 3500px;
  position: relative;
}
.container >>> .van-swipe img {
  height: 300px;
  width: 100%;
}
.title {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}
.navto {
  display: flex;
  width: 100%;
  height: 100px;
  justify-content: space-around;
  border: 0px solid red;
}
#nav {
  width: 100%;
  height: 100px;
  font-size: 50px;
  line-height: 100px;
  text-align: center;
  display: none;

  z-index: 1;
}
.link {
  font-size: 49px;
  border-bottom: 5px solid #ff5f16;
}
.liok {
  font-size: 49px;
}
</style>